<template>
    <Card :dis-hover="true">
        <Row>
            <Col span="24">
                 <Form :label-width="80" label-position="left">
                    <FormItem label="文章标题" required>
                        <Input v-model="formItem.Name" icon="android-list" :disabled="!editable" />
                    </FormItem>
                    <FormItem label="作者"  required>
                        <Input v-model="formItem.Author" icon="person" :disabled="!editable" />
                    </FormItem>
                    <FormItem label="内容来源"  required>
                         <Select v-model="formItem.Source" style="width:200px" :disabled="!editable" >
                            <Option value="原创">原创</Option>
                            <Option value="转载">转载</Option>
                            <Option value="其它">其它</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="简介"  required>
                        <Input v-model="formItem.Summary" type="textarea" :rows="4"  :disabled="!editable" />
                    </FormItem>
                    <FormItem label="内容" required>
                        <WangEditor ref="editor" v-model="formItem.Content" :disable="!editable"
                        :uploadurl="action" :uploadparams="params"
                        :uploadheader="uploadheader" :domain="fdsUrl"></WangEditor>
                    </FormItem>
                   
                </Form>

            </Col>
        </Row>
        <div class="footer" v-if="editable" >
            
            <Button v-if="addmode" @click="publish">发布</Button>
      
            <Button v-else @click="publish">保存修改</Button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button>返回</Button>
        </div>
    </Card>
</template>
<script>
import WangEditor from '@/components/wangEditor';
import { getStore } from '@/common/utils';
import { SERVER_BASE_URL, SERVER_CPT_URL, STATIS_HOST } from '@/api/config';
import axios from 'axios';
export default {
  name: 'CMSEditor',
  components: {
    WangEditor
  },
  props: {

  },
  computed: {
    action () {
      return SERVER_CPT_URL + '/upload/PhotoUpload';
    },
    fdsUrl () {
      return STATIS_HOST;
    },
    params () {
      return {
        token: getStore('token')
      };
    },
    uploadheader () {
      return {
        'Authorization': getStore('token')
      };
    },
    addmode () {
      return !!this.$route.params.addmode;
    },
    editable () {
      return !!this.$route.params.editable;
    },
    menudId () {
      return this.$route.params.menu_id;
    }
  },
  data () {
    return {
      editor: {
        config: {
          width: '100%',
          height: '450px',
          allowFileManager: false,
          langType: 'zh-CN',
          items: [
            'undo',
            'redo',
            'preview',
            'print',
            'cut',
            'copy',
            'paste',
            'plainpaste',
            'wordpaste',
            'justifyleft',
            'justifycenter',
            'justifyright',
            'justifyfull',
            'insertorderedlist',
            'insertunorderedlist',
            'indent',
            'outdent',
            'subscript',
            'superscript',
            'clearhtml',
            'quickformat',
            'selectall',
            'formatblock',
            'fontname',
            'fontsize',
            'forecolor',
            'hilitecolor',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'lineheight',
            'removeformat',
            'table',
            'hr',
            'pagebreak',
            'anchor',
            'link',
            'unlink',
            'uploadimg',
            'fullscreen'
          ],
          uploadJson: SERVER_BASE_URL + '/upload/PhotoUpload',
          staticHost: STATIS_HOST,
          filePostName: 'file',
          allowFlashUpload: false,
          allowImageRemote: false,
          formatUploadUrl: false
        }
      },
      formItem: {
        Content: '',
        Source: '原创',
        Menu: this.menudId
      }
    };
  },
  methods: {
    
    handleSuccess3 (resp) {
      if (resp && resp.code === 0) {
        // this.formItem.Source = this.formItem.Source + '<br>' + resp.jdata.src;
        // this.src = C_ROOT + resp.jdata.src;
        let src = STATIS_HOST + resp.jdata.src;
        let file = resp.jdata.file;
        let template = `<br> <a href='${src}' download>${file}</a>`;
        this.formItem.Source = this.formItem.Source + template;
        this.$Message.success('附件添加成功成功！');
      } else {
        this.$Message.error('系统错误！');
      }
      console.log(resp);
    },
    publish () {
      if (this.formItem.Summary == null || this.formItem.Summary === '') {
        this.$Message.error('请填写文章简介！');
      } else if (this.formItem.Name == null || this.formItem.Name === '') {
        this.$Message.error('请填写文章标题！');
      } else if (
        this.formItem.Author == null ||
        this.formItem.Author === ''
      ) {
        this.$Message.error('请填写文章来源！');
      } else {
        if (this.addmode) {
          this.formItem.Menu = this.menudId;
          this.$api.addArticle(this.formItem).then(resp => {
            if (resp.code === 0) {
              this.$Message.success('发布成功！');
              this.$router.push({
                name: '新闻管理'
                //   params: { menu_id: this.$route.params.menu_id }
              });
            } else {
              this.$Message.error('发布异常！');
            }
          });
        } else {
          this.$api.updateAritcle(this.formItem).then(res => {
            if (res.code === 0) {
              this.$Message.success('操作成功！');
              this.$router.push({
                name: '新闻管理'
              });
            }
          }, err => {
            if (err) {
              this.$Message.error(err);
              this.$router.push({
                name: '新闻管理'
              });
            }
          });
        }
      }
    }
  },
  mounted () {
    if (!this.addmode) {
    //   console.log(this.menudId);
      this.formItem = this.$route.params.row;
      this.formItem.Menu = this.$route.params.menu_id;
      this.$refs['editor'].editor.txt.html(this.formItem.Content);
    }
  }
};
</script>
<style>
.ql-container {
  height: 35rem;
}
.footer-btn {
  text-align: center;
}
.footer {
    text-align:center;
    position: relative;
    bottom: 15px;;
}
</style>


